<template>
	<view class="editPassword">
		
		<u-navbar  title="忘记密码"  :border-bottom="false"  >
		</u-navbar>
		<view class="editPassword__block">
			
			<view class="editPassword__block__text">
				请输入账号绑定的手机号，我们将向此手机号发送验证短信
			</view>
<!-- 			<view class="editPassword__block__phone">
				+{{state.code}} {{getSafeText(phone)}}
			</view> -->
			<u-form-item class="editPassword__block__input">
				<view class="editPassword__block__input__countryCode" @click="getCountry()">
					<view>+{{state.code}}</view>
					<view class="editPassword__block__input__countryCode__border-right"></view>
				</view>
				<u-input
					v-model="phone"  
					:label-width="0"
					:focus="true"
					type="number"
					placeholder=""
					:clearable="false"
					@input="checkPhone">
					
				</u-input>
			</u-form-item>
		
			<u-button class="editPassword__block__button" :disabled="canClick" type="primary" @click="getCode()">
				<view v-if="!loadding">发送验证码</view>
				<u-loading v-else mode="circle"></u-loading>
				
			</u-button>
			
		</view>
	</view>
</template>

<script>
	import  axios from "axios";
	import store from './store.js'
	export default {
		data() {
			return {
				state:store.state,
				passwordIcon:true,
				phone:'',
				canClick:true,
				loadding:false,
			}
		},
		onLoad() {
			
		},
		onLoad() {

		},
		mounted(){
			// this.phone=this.$store.state.userInfo.phone
		},
		methods: {
			getCountry(){
				uni.navigateTo({
					url:"/pages/login/chooseCountry"
				})
			},
			checkPhone(){
				if(this.$u.test.mobile(this.phone)){
					
					this.canClick=false
				}else{
					this.canClick=true
				}
			},
			getSafeText(phone){
				return phone.substring(0,3)+"****"+phone.substring(phone.length-4)
			},
			getCode() {
				this.loadding=true
				let phoneCodeData={
					"phone":this.phone,
					"type":3
				}
				axios({
					method:"get",
					url:this.$store.state.baseURL+"/user/phonecode",
					params:phoneCodeData,
				}).then((response)=>{
					this.loadding=false
					console.log("response",response)
					if(response.data.state=="SUCCESS"){
						uni.showToast({
							title: '验证码发送成功',
							icon:'none',
							duration: 2000
						});
						this.state.phone=this.phone
						uni.navigateTo({
							url:"/pages/login/forgetPasswordCodeVerfication"
						})
					}else{
						uni.showToast({
							title: '验证码发送失败',
							icon:'none',
							duration: 2000
						});
					}
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	a {
		color: $uni-text-color-placeholder;
	}
</style>
<style lang="less" scoped>
	.editPassword{
		display: flex;
		flex-direction: column;
		align-items: center;
		// height: calc(100vh);
		// background-color: @uni-bg-color-grey;
		
		&__block {
		display: flex;
		flex-direction: column;
		&__input {
			margin:@uni-spacing-row-sm 2*@uni-spacing-row-lg  0  2*@uni-spacing-row-lg ;
			font-size: @uni-font-size-lg;
			&__countryCode{
				margin-right: @uni-spacing-col-sm ;
				display: flex;
				align-items:center;
				&__border-right{
					margin-left: @uni-spacing-col-base;
					background-color: @uni-border-color;
					width: 1px;
					height: 10px;
				}
			}
		
		}

		&__text{
			margin: 2*@uni-spacing-row-lg 2*@uni-spacing-row-lg;
			
			text-align: center;
			color: @font-color-grey;
		}
		&__phone{
			margin: @uni-spacing-row-lg 2*@uni-spacing-row-lg;
			text-align: center;
			font-size: @uni-font-size-lg;
		}
		&__button {
			margin-top: @uni-spacing-row-lg;
			margin-left: 2*@uni-spacing-col-lg;
			margin-right:2*@uni-spacing-col-lg;
		}
		// }
	}
	}
</style>

<!-- <template>
	<view class="forgetPassword">
		
		<u-navbar  title=""  :border-bottom="false"  >
		</u-navbar>
		<view class="forgetPassword__block">
			<view class="forgetPassword__block__title">忘记</view>
			<view class="form">
			<u-form-item class="forgetPassword__block__input">
				<view class="forgetPassword__block__input__countryCode" @click="getCountry()">
					<view>+{{store.state.code}}</view>
					<view class="forgetPassword__block__input__countryCode__border-right"></view>
				</view>
				<u-input
					v-model="phone" 
					placeholder="" 
					:label-width="0"
					:focus="true"
					type="number"
					:clearable="false"
					@input="checkPhone">
				</u-input>
			</u-form-item>
		
			<u-button class="forgetPassword__block__button" :disabled="canClick" type="primary" @click="getCode()">
				<view v-if="!loadding">确定</view>
				<u-loading v-else mode="circle"></u-loading>
				
			</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import  axios from "axios";
	import store from './store.js'
	export default {
		data() {
			return {
				store:store,
				passwordIcon:true,
				phone:'',
				canClick:true,
				loadding:false,
			}
		},
		onLoad() {
			
		},
		onLoad() {

		},
		mounted(){

		},
		methods: {
			getCountry(){
				
				uni.navigateTo({
					url:"/pages/login/chooseCountry"
				})
			},
			checkPhone(){
				if(this.$u.test.mobile(this.phone)){
					
					this.canClick=false
				}else{
					this.canClick=true
				}
			},
			getCode() {
				this.loadding=true
				let phoneCodeData={
					"phone":this.phone,
					"type":3
				}
				axios({
					method:"get",
					url:getApp().$store.state.baseURL+"/user/phonecode",
					params:phoneCodeData,
				}).then((response)=>{
					this.loadding=false
					console.log("response",response)
					if(response.data.state=="SUCCESS"){
						uni.showToast({
							title: '验证码发送成功',
							icon:'none',
							duration: 2000
						});
						this.store.state.phone=this.phone
						uni.navigateTo({
							url:"/pages/login/forgetPasswordCodeVerfication"
						})
					}else{
						uni.showToast({
							title: '验证码发送失败',
							icon:'none',
							duration: 2000
						});
					}
				})
			},
			

		}
	}
</script>
<style lang="scss" scoped>
	a {
		color: $uni-text-color-placeholder;
	}
</style>
<style lang="less" scoped>
	.forgetPassword{
		display: flex;
		flex-direction: column;
		align-items: center;
		&__block {
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		&__title{
			align-self: flex-start;
			font-size: x-large;
			// font-weight: bold;
			margin: @uni-spacing-row-sm @uni-spacing-col-lg 0 @uni-spacing-col-lg ;
		}
		
			&__input {
				margin:@uni-spacing-row-sm @uni-spacing-col-lg  0  @uni-spacing-col-lg ;
				font-size: @uni-font-size-x-lg;
				&__countryCode{
					margin-right: @uni-spacing-col-sm ;
					display: flex;
					align-items:center;
					&__border-right{
						margin-left: @uni-spacing-col-base;
						background-color: @uni-border-color;
						width: 1px;
						height: 10px;
					}
				}
				&__button{
					// background-color: #e2e2e2;
					font-size: small;
					color: @font-color-blue;
					&__disabled{
						color: @uni-text-color-grey;
						cursor: not-allowed;
					}
				}

			}
			&__button {
				margin-top: @uni-spacing-row-lg;
				margin-left: @uni-spacing-col-lg;
				margin-right: @uni-spacing-col-lg;
			}
		// }
	}
	}
</style>
 -->
 